<template>
    <div>
        <ButtonGroup>
            <Button @click="changeType(1)" >新闻分类</Button>
            <Button @click="changeType(2)" >上传分类</Button>
            <Button @click="changeType(1)" >评论分类</Button>
            <Button @click="changeType(4)" >产品分类</Button>
        </ButtonGroup>
        <Tree :data="baseData"  @on-select-change="getNodeId" ></Tree>
        <Button type="info" @click="modal1 = true" style="width: 150px;height:50px;position:absolute;bottom:120px">点击进行节点添加修改</Button>
        <Button type="error" @click="delNode" style="width: 100px;height:50px;position:absolute;bottom:120px;left:170px">删除节点</Button>
        
        <Modal class="classname" v-model="modal1" title="分类节点修改">
            <Input v-model="title" placeholder="请输入节点名称" style="width: 450px;margin:10px 15px"></Input></br>
            <Button type="success" @click="addRoot" style="width: 130px;margin-left:35px">添加根节点</Button>
            <Button type="info" @click="addChildNode" style="width: 130px">添加子节点</Button>
            <Button type="warning"  @click="changeNode" style="width: 130px">修改节点名称</Button>
        </Modal>
    </div>
</template>

<script>
export default {
     data () {
        return {
            baseData:[],
            formValidate:{
                title:'',
                type:1
            },
            title:'',
            id:'',
            className:'',
            parentId:null,
            sel:'',
            modal1: false
        }
    },
    methods:{
        renderContent (h, { root, node, data }) {
                return h('span', {
                    style: {
                        display: 'inline-block',
                        width: '100%'
                    }
                }, [
                    h('span', [
                        h('Icon', {
                            props: {
                                type: 'ios-paper-outline'
                            },
                            style: {
                                marginRight: '8px'
                            }
                        }),
                        h('span', data.title)
                    ])
                ])
        },
        changeType(type){
            this.formValidate.type=type;
            this.getTree(type);
        },
        getTree(type){
            this.$Loading.start();
            this.$http({
                url:'http://localhost:3000/cate/list/'+type,
                method:'get'
            }).then(res=>{
                this.baseData = res.data;
                this.$Loading.finish();
            })
        },
        getNodeId(nodeInfo){
            this.id=nodeInfo[0]._id;
            this.parentId=nodeInfo[0].parentId;
        },
        addRoot(){
            if(this.title){
                this.parentId=null;
                this.$http({
                    url:'http://localhost:3000/cate/data',
                    method:'post',
                    data:{
                        title:this.title,
                        type:this.formValidate.type
                        }
                }).then(res=>{
                    console.log(res);
                    this.changeType(this.formValidate.type);
                });
                this.title='';
                this.modal1=false;
                this.$Message.success('添加根节点成功');
            }else{
                this.$Message.error('添加根节点失败！名称不能为空');
            }
            
        },
        addChildNode(){
            if(this.id){
                this.$http({
                    url:'http://localhost:3000/cate/data',
                    method:'post',
                    data:{
                        title:this.title,
                        type:this.formValidate.type,
                        parentId:this.id
                        }
                }).then(res=>{
                    console.log(res);
                    this.changeType(this.formValidate.type);
                });
                this.title='';
                this.modal1=false
                this.$Message.success('添加子节点成功');
            }else{
                this.$Message.error('添加子节点失败！请先选择一个根节点');
            }
           
        },
        changeNode(){
            if(this.id){
                this.$http({
                    url:'http://localhost:3000/cate/data/'+this.id,
                    method:'post',
                    data:{
                        title:this.title,
                    }
                }).then(res=>{
                    console.log(res);
                    this.changeType(this.formValidate.type);
                });
                this.title='';
                this.modal1=false;
                this.$Message.success('修改节点成功');
            }else{
                this.$Message.error('修改节点失败！请先选择一个节点');
            }
            
        },
        delNode(){
            if(this.id){
                this.$http({
                    url:'http://localhost:3000/cate/data/'+this.id,
                    method:'delete',
                }).then(res=>{
                    console.log(res);
                    this.changeType(this.formValidate.type);
                });
                this.modal1=false
                this.$Message.success('删除节点成功');
            }else{
                this.$Message.error('删除节点失败！您还未选择需要删除的节点');
            }
            
        }
    },
    created(){
        this.getTree(1)
    }
}
</script>

<style>
    .classname .ivu-modal-footer{
        display:none;
    }
</style>